<template>
    <div>
      <!-- 面包屑导航 -->
      <div class="breadNav" style="margin: 20px 0 20px 20px;">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-home">首页</el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-position" :to="{ path: '/eva' }"><a href="/">评价管理</a></el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-position">回复评价</el-breadcrumb-item>
        </el-breadcrumb>  
    </div>
      <!-- 查看详情 -->
      <div class="checkList">
          <el-form  v-model="sizeForm" label-width="80px" size="mini">
              <el-form-item label="订单号:">
                  <span>{{sizeForm.listCode}}</span>
              </el-form-item>
              <el-form-item label="评价商品:">
                  <span>{{sizeForm.store}}</span>
              </el-form-item>
              <el-form-item label="评价买家:">
                  <span>{{sizeForm.evalbuyer}}</span>
              </el-form-item>
              <el-form-item label="评价等级:">
                  <div class="block">
                      <el-rate
                          v-model="value2"
                          :colors="colors">
                      </el-rate>
                  </div>
              </el-form-item>
              <el-form-item label="首次评价:">
                  <span>{{sizeForm.firstEval}}</span>
                  <el-upload
                  action="http://127.0.0.1:7001/api/Xloadimg"
                  :on-success="handleAvatarSuccess"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
              </el-form-item>
              <el-form-item label="回复:">
                    <el-input placeholder="请输入内容" style="width:300px;"  v-model="sizeForm.responsestate"></el-input>
                    <el-button type="danger" style="margin-left:20px;">请输入内容</el-button>
              </el-form-item>
              <el-form-item size="large" style="margin-top:20px">
                  <el-button type="primary" @click="onSubmit">提交</el-button>
                  <el-button type="primary" @click="back">返回列表</el-button>
                </el-form-item>
          </el-form>
      </div>
      
  
    </div>
  </template>
  
  <script>
  import {findVerifyList,getXmodifyVerify} from '../../../api'
  export default {
      data() {
        return {
          sizeForm: {
            listCode:'',
            store:'',
            evalbuyer:'',
            firstEval:'',
            responsestate:''
          },
          // 评分
          value2:null,
          colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
          // 图片上传
          dialogImageUrl: '',
          dialogVisible: false,
        };
      },
      created() {
        if(this.$route.params.id == undefined){
        this.$router.push("/eva")
       }else{
        findVerifyList(this.$route.params.id).then(res => {
          console.log(res);
          this.sizeForm = res.data
        })
        console.log(this.$route.params.id);
       }
      },
      methods: {
        // 封装
        hah() {
          if(this.$route.params.id == 'undefined'){
        this.$router.push("/eva")
       }else{
        findVerifyList(this.$route.params.id).then(res => {
          this.sizeForm = res.data
        })
        console.log(this.$route.params.id);
       }
        },
        onSubmit() {
          getXmodifyVerify(this.sizeForm).then(res => {
            console.log(res)
           this.hah()
          })
          this.$router.push('/eva')
        },
        back() {
          this.$router.push('/eva')
        },
        // 图片上传
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        handleAvatarSuccess(res, file) {
          console.log(res)
          this.sizeForm.firstEval = `http://127.0.0.1:7001${res.data}`
        },
      },
  }
  </script>
  
  <style lang="scss" scoped>
  .checkList {width:1000px;margin:0 auto;}
  </style>